<template>
  <div id="productDetails">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <!-- 没有理财 -->
      <div class="notData" v-if="flage ==2">
        <img src="@/assets/img/new1/reac/nodata.png" alt />
        <p style="color:#a8a7ab">{{$t('m.noTransaction')}}</p>
      </div>
      <!-- 理财列表 -->
      <div class="product" v-if="flage ==1">
        <div class="product-item">
          <!-- <div class="top">
            <div>
              <div>
                <p>{{$t('m.lc1')}}</p>
                <p>20000 VC</p>
              </div>
              <div>
                <p>{{$t('m.lc2')}}</p>
                <p>50 VC</p>
              </div>
            </div>
            <p>
              <span>1600{{$t('m.reservation')}}</span>
              <span>{{$t('m.tips15_5')}}</span>
              <span>{{$t('m.regularProduct')}}</span>
            </p>
            <div class="btn" @click="pickVcAll">{{$t('m.fp3')}}</div>
          </div>-->
          <div class="content">
            <div class="list">
              <div class="list_title">
                <span>{{$t('m.lc3')}}</span>
                <span>{{$t('m.increment')}}</span>
                <span>{{$t('m.released')}}/{{$t('m.released1')}}</span>
                <span>{{$t('m.buyTime')}}</span>
              </div>
              <ul>
                <li v-for="(i,e) in vclist" :key="e" @click="$router.push(`/vcList?vcid=${i.id}`)">
                  <span>{{e+1}}</span>
                  <span>{{(i.releaseAmount-50).toFixed(2)}}</span>
                  <span>{{(i.vcAmount-i.freezeVcAmount).toFixed(2)}}/{{(i.vcAmount-(i.vcAmount-i.freezeVcAmount)).toFixed(2)}}</span>
                  <span>
                    <label>{{i.createTime}}</label>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- <div v-if="wdyUsdtOrder.length <1" class="notData">
        <img src="@/assets/img/new1/reac/nodata.png" alt />
        <p>{{$t('m.noTransaction')}}</p>
      </div>
      <div
        class="top"
        v-for="(item,index) in wdyUsdtOrder"
        :key="index"
        v-if="wdyUsdtOrder.length >0"
        @click="goDetail(item)"
      >
        <div>
          <div>
            <p>
              <img src="@/assets/img/new/logo@2x.png" alt />
              {{item.extraData.wdyFinancial.productName}}
            </p>
            <p>{{item.extraData.wdyFinancial.productTerm}}{{$t('m.tips15_3')}}</p>
          </div>
          <div>
            <p>{{$t('m.minimum')}}</p>
            <p class="fontweight">20.00%</p>
          </div>
        </div>
        <p>
          <span>{{$t('m.tips15_4')}}</span>
          <span>{{$t('m.tips15_5')}}</span>
          <span>{{item.extraData.wdyFinancial.closingTime}}{{$t('m.tips15_6')}}</span>
        </p>
        <div class="detail">
          <h2>{{$t('m.productDetails')}}</h2>
          <p>
            <span>{{$t('m.amount')}}(USDT)</span>
            <span>{{$t('m.purchaseTime')}}</span>
            <span>{{$t('m.status')}}</span>
            <span>{{$t('m.income')}}(USDT)</span>
          </p>
          <p>
            <span>{{item.usdtAmount}}</span>
            <span>{{item.createTime}}</span>
            <span>{{$t('m.bought')}}</span>
            <span>{{(item.usdtAmount*1.01).toFixed(2)}}</span>
          </p>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      wdyUsdtOrder: [],
      userObj: {},
      vclist: [],
      flage: 0
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        sessionStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });
    let category = 0;
    if (localStorage.getItem("language") == "en_US") {
      category = 1;
    } else {
      category = 0;
    }
    // 获取理财产品
    this.getList();
    this.changeTitle(this.$t("m.financialProduct"));
  },
  components: { Header },
  computed: {},
  mounted() {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    goDetail(item) {
      this.$router.push(
        `/productDetails?&id=${item.extraData.wdyFinancial.productId}`
      );
    },
    // 获取vc记录
    getList() {
      Services.getWdyUsdtOrder({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        console.log(res);
        if (res.code == "0000") {
          if (res.list.length > 0) {
            this.flage = 1;
            this.vclist = res.list;
          } else {
            this.flage = 2;
          }
        } else {
          Toast(res.msg);
        }
      });
    },
    // 一键领取
    pickVcAll() {
      Services.pickVcAll({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if ((res.code = "0000")) {
          console.log(res);
          this.getList();
          Toast(res.msg);
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#productDetails {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: scroll;
    .product {
      .product-item {
        .top {
          padding: 0.5rem 0.3rem 0.3rem;
          min-height: 3.2rem;
          box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
          > div {
            display: flex;
            margin-bottom: 0.4rem;
            div {
              flex: 1;
              p {
                text-align: center;
                &:nth-of-type(2) {
                  font-size: 0.4rem;
                  padding-top: 0.2rem;
                  font-weight: 700;
                  color: #fd6262;
                }
              }
            }
            &.detail {
              display: block;
              padding-top: 0.4rem;
              margin-bottom: 0.1rem;
              p {
                display: flex;
                span {
                  flex: 1;
                  display: flex;
                  justify-content: center;
                  padding-bottom: 0.1rem;
                  &:nth-last-child {
                    padding: 0;
                  }
                }
              }
            }
          }
          > p {
            display: flex;
            justify-content: space-between;
            span {
              width: 30%;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 0.02rem solid #fff;
              padding: 0.06rem 0;
              border-radius: 0.08rem;
              font-size: 0.24rem;
            }
          }
          .btn {
            display: block;
            margin-bottom: 0;
            width: 90%;
            background: linear-gradient(to right, #ecca96, #d0a060);
          }
        }
        .content {
          // padding: 0.5rem 0.3rem;
          .list {
            .list_title {
              height: 1rem;
              // background: #f3f3f3;
              box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
              display: flex;
              padding-left: 0.15rem;
              justify-content: space-between;
              span {
                display: flex;
                justify-content: center;
                align-items: center;
                color: #40404c;
                font-size: 0.26rem;
                font-weight: bold;
                width: 15%;
                &:nth-of-type(3) {
                  width: 35%;
                }
                &:last-child {
                  flex: 1;
                  //   justify-content: flex-end;
                }
              }
            }
            ul {
              min-height: 3rem;
              background: #fff;
              padding: 0.1rem 0;
              li {
                padding-left: 0.15rem;
                width: 100%;
                height: 0.75rem;
                // line-height: 0.75rem;
                font-size: 0.24rem;
                color: #8a8a8a;
                font-weight: normal;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f2f2f2;
                align-items: center;
                &:nth-of-type(2n) {
                  background: #f8f8f8;
                }
                &:nth-last-of-type(1) {
                  border-bottom: none;
                }
                span {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #8a8a8a;
                  width: 15%;

                  &:nth-of-type(3) {
                    width: 35%;
                  }
                  &:last-child {
                    flex: 1;
                    label {
                      display: block;
                      text-align: center;
                    }
                    // justify-content: flex-end;
                  }
                }
              }
            }
          }
        }
      }
    }
    .notData {
      color: #fff;
      padding: 1.5rem;
      text-align: center;
      img {
        width: 2.5rem;
        height: auto;
        display: inline-block;
        margin-bottom: 0.4rem;
      }
    }
  }
}
</style>